import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import SettingLayout from '@/component/setting/Layout';
import SettingStyle from '@/page/setting/setting.scss';
import UploadImage from '@/component/setting/UploadImage';
import { Button, Modal, Input, message, Spin } from 'antd';
import MModal from '@/component/common/MModal';

import { verify_apply } from '@/constants/ApiTypes';
import ApiHelper from '@/store/ApiHelper';
import AlStore from '@/store/Alliance';

class TipPage extends Component {
    static propTypes = {
        tip: PropTypes.string.isRequired
    };
    render() {
        return (
            <div className={SettingStyle['tip-wrap']}>
                <h2>{this.props.tip}</h2>
            </div>
        );
    }
}

@observer class SettingIdentity extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        companyName: '',
        businessLicence: '',
        legalPersonName: '',
        IDNumber: '',
        spinning: false,
        bu_license_id: 0, //营业执照
        id_card_front: 0, //身份证正面
        id_card_back: 0  //身份证反面
    };
    componentDidMount() {
        this.tip();
    }
    tip = () => {
        if (AlStore.info.verify == 1) {
            MModal.success({ title: '提示', content: '实名认证已通过，无需重复认证' });
            return false;
        }
        if (AlStore.info.verify_apply == 1) {
            MModal.success({ title: '提示', content: '实名认证申请中，请耐心等待' });
            return false;
        }
        return true;
    };
    companyNameChange = e => {
        let value = e.target.value;
        this.setState({
            companyName: value
        })
    };
    businessLicenceChange = e => {
        let value = e.target.value;
        this.setState({
            businessLicence: value
        })
    };
    legalPersonNameChange = e => {
        let value = e.target.value;
        this.setState({
            legalPersonName: value
        })
    };
    IDNumberChange = e => {
        let value = e.target.value;
        this.setState({
            IDNumber: value
        })
    };
    buLicenseOnChange = fileList => {
        let picId = fileList.length > 0 ? fileList[0] : 0;
        this.setState({ bu_license_id: picId });
    };
    idChardFrontOnChange = fileList => {
        let picId = fileList.length > 0 ? fileList[0] : 0;
        this.setState({ id_card_front: picId });
    };
    idChardBackOnChange = fileList => {
        let picId = fileList.length > 0 ? fileList[0] : 0;
        this.setState({ id_card_back: picId });
    };
    handleSubmit = async () => {
        if (!this.tip()) return;
        const { companyName, businessLicence, legalPersonName, IDNumber, bu_license_id, id_card_front, id_card_back } = this.state;
        if (bu_license_id == 0) return message.warn('请上传营业执照！', 1.5);
        if (id_card_front == 0) return message.warn('请上传身份证正面！', 1.5);
        if (id_card_back == 0) return message.warn('请上传身份证反面！', 1.5);
        if (companyName == '') {
            this.companyNameInput.focus();
            return message.warn('请填写公司全称！', 1.5);
        }
        if (businessLicence == '') {
            this.businessLicenceInput.focus();
            return message.warn('请填写营业执照号码！', 1.5);
        }
        if (legalPersonName == '') {
            this.legalPersonNameInput.focus();
            return message.warn('请填写法人姓名！', 1.5);
        }
        if (IDNumber == '') {
            this.IDNumberInput.focus();
            return message.warn('请填写身份证号！', 1.5);
        }
        this.setState({ spinning: true });

        const data = {
            bu_license: bu_license_id,
            id_card_front,
            id_card_back,
            company_name: companyName,
            bu_license_no: businessLicence,
            legal_person_name: legalPersonName
        };

        const result = await ApiHelper.requestPost(verify_apply, data);
        this.setState({ spinning: false });
        if (result.status) {
            await AlStore.getInfo();
            MModal.success({ title: '操作成功', content: '申请成功，等待后台处理', duration: 1.5 });
        } else {
            MModal.success({ title: '操作失败', content: result.info });
        }
    };
    render() {
        const { companyName, businessLicence, legalPersonName, IDNumber } = this.state;
        let tip;
        if (AlStore.info.verify == 1) {
            tip = '实名认证已通过，无需重复认证';
        }
        if (AlStore.info.verify_apply == 1) {
            tip = '实名认证申请中，请耐心等待';
        }
        if (tip) {
            return (
                <SettingLayout>
                    <div className={SettingStyle['identity-wrap']}>
                        <TipPage tip={tip}/>
                    </div>
                </SettingLayout>
            );
        }
        return (
            <SettingLayout>
                <Spin tip="loading" spinning={this.state.spinning} delay={150}>
                    <div className={SettingStyle['identity-wrap']}>
                        <h2 className={SettingStyle['title']}>实名认证</h2>
                        <div className={SettingStyle['upload-pic']}>
                            <div className={SettingStyle['label-item']}>
                                <span className={SettingStyle['icon-label-text']}>上传营业执照</span>
                                <UploadImage btnText="上传图片" fileChange={this.buLicenseOnChange}/>
                            </div>
                            <div className={SettingStyle['label-item']}>
                                <span className={SettingStyle['icon-label-text']}>上传身份证</span>
                                <UploadImage btnText="上传正面" fileChange={this.idChardFrontOnChange}/>
                                <span style={{ width: 40, display: 'inline-block' }} />
                                <UploadImage btnText="上传反面" fileChange={this.idChardBackOnChange}/>
                            </div>
                        </div>
                        <div className={SettingStyle['input-group']}>
                            <div className={SettingStyle['label-item']}>
                                <span className={SettingStyle['label-text']}>公司全称</span>
                                <Input value={ companyName } ref={input => this.companyNameInput = input} onChange={ this.companyNameChange } placeholder="请输入公司全称" />
                            </div>
                            <div className={SettingStyle['label-item']}>
                                <span className={SettingStyle['label-text']}>营业执照号码</span>
                                <Input value={ businessLicence } ref={input => this.businessLicenceInput = input} onChange={ this.businessLicenceChange } placeholder="请输入营业执照号码" />
                            </div>
                            <div className={SettingStyle['label-item']}>
                                <span className={SettingStyle['label-text']}>法人姓名</span>
                                <Input value={ legalPersonName } ref={input => this.legalPersonNameInput = input} onChange={ this.legalPersonNameChange } placeholder="请输入法人姓名" />
                            </div>
                            <div className={SettingStyle['label-item']}>
                                <span className={SettingStyle['label-text']}>身份证号</span>
                                <Input value={ IDNumber } ref={input => this.IDNumberInput = input} onChange={ this.IDNumberChange } placeholder="请输入身份证号" />
                            </div>
                            <div className={SettingStyle['oper-btn']}>
                                <a className={SettingStyle['submit-btn']} onClick={ this.handleSubmit } href="javascript:void(0);">确认提交</a>
                            </div>
                        </div>
                    </div>
                </Spin>
            </SettingLayout>
        );
    }
}

export default SettingIdentity;